<template>
    <div>
        <Bread></Bread>
        <el-card>
            <el-alert title="警告提示的文案" type="warning" center>
            </el-alert>
            <el-steps :active="parseInt(active)" finish-status="success" align-center>
                <el-step title="步骤 1"></el-step>
                <el-step title="步骤 2"></el-step>
                <el-step title="步骤 3"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!-- 表单 -->
            <el-form label-width="80px" ref="reForm" :rules="rules">
                <!-- tabs栏选项卡 -->
                <el-tabs :tab-position="'left'" style="height: 500px;" v-model="active" :before-leave="changeTab">
                    <el-tab-pane label="基本信息">
                        <el-form-item label="商品名称">
                            <el-input type="text" v-model="formData.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格">
                            <el-input type="text" v-model="formData.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量">
                            <el-input type="text" v-model="formData.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量">
                            <el-input type="text" v-model="formData.goods_weight"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类">
                            <el-cascader v-model="value" :options="options"
                                :props="{ label: 'cat_name', value: 'cat_id' }"></el-cascader>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品图片">
                        <!-- <el-upload action="http://shiyansong.cn:8888/api/private/v1/upload" list-type="picture-card" :auto-upload="false" :headers="headers">
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload> -->
                        {{ formData.pics }}
                        <el-upload class="upload-demo" action="http://shiyansong.cn:8888/api/private/v1/upload"
                            :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture"
                            :headers="headers">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="商品内容">
                        <!-- 富文本编辑器组件 -->
                        <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"
                            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"
                            @ready="onEditorReady($event)">
                        </quill-editor>
                        <el-button type="primary" class="submit" @click="submit">提交</el-button>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import mixin from '@/mixin/mixin'
import { cateList } from '@/utils/categoryapi'
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import {mapMutations} from 'vuex'
export default {
    mixins: [mixin],
    components: {
        quillEditor
    },
    data() {
        return {
            active: '',
            options: [],//三层分类列表数据
            cateList: [],
            value: [],
            headers: {},
            formData: {
                "goods_name": "",
                "goods_cat": "",
                "goods_price": '',
                "goods_number": '',
                "goods_weight": '',
                "goods_introduce": "",
                "pics": [],
            },
            // 富文本编辑器配置
            editorOption: {
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                        ['blockquote', 'code-block'], // 引用  代码块
                        [{ header: 1 }, { header: 2 }], // 1、2 级标题
                        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                        [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                        [{ indent: '-1' }, { indent: '+1' }], // 缩进
                        [{ direction: 'rtl' }], // 文本方向
                        [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
                        [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
                        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                        // [{ font: ['songti'] }], // 字体种类
                        [{ align: [] }], // 对齐方式
                        ['clean'], // 清除文本格式
                        ['image', 'video'] // 链接、图片、视频
                    ]
                },
                placeholder: '请输入正文'
            },
            content:'',
            rules: {
                "goods_name": [
                    {required: true, message: "商品名称不能为空", trigger: "blur"}
                ],
                "goods_price": [
                    {required: true, message: "商品价格不能为空", trigger: "blur"}
                ],
                "goods_weight": [
                    {required: true, message: "商品重量不能为空", trigger: "blur"}
                ],
                "goods_number": [
                    {required: true, message: "商品数量不能为空", trigger: "blur"}
                ],
                "goods_cat": [
                    {required: true, message: "商品分类不能为空", trigger: "blur"}
                ]
            },
        }
    },
    methods: {
        ...mapMutations(['addGoods']),
        async getCate() {
            let res = await cateList({ type: 3 });
            this.options = res.data;
        },
        /* 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 */
        changeTab(activeName, oldActiveName) {
            // console.log(activeName, oldActiveName);
            if (activeName == 1 || activeName == 2) {
                if (this.value.length == 0) {
                    this.$message.error('请添加商品分类');
                    return false;
                }
            }
        },
        handlePreview(res) {
            // console.log(response, file, fileList);
            this.formData.pics.push({ pic: res.data.tmp_path });
        },
        /* 删除文件列表的钩子函数 */
        handleRemove(file, fileList) {
            let tmp_path = file.response.data.tmp_path;
            let index = this.formData.pics.findIndex(item => {
                return item.tmp_name == tmp_path
            })
            this.formData.pics.splice(index, 1);
        },
        // 失去焦点事件
        onEditorBlur(quill) {
            // console.log('editor blur!', quill)
        },
        // 获得焦点事件
        onEditorFocus(quill) {
            // console.log('editor focus!', quill)
        },
        // 准备富文本编辑器
        onEditorReady(quill) {
            // console.log('editor ready!', quill)
        },
        // 内容改变事件
        onEditorChange({ quill, html, text }) {
            // console.log('editor change!', quill, html, text)
            this.content = html
        },
        /* 提交添加 */
        async submit() {
            // alert(111);
            let res = await this.$http.post('goods',this.formData);
            let obj = res.data;
            this.addGoods(obj);
            this.$router.push('/goods');
        }
    },
    mounted() {
        this.getCate();
        let token = this.$store.state.userObj;
        // console.log(token);
        this.headers.Authorization = token;
    }
}
</script>

<style lang="scss" scoped>
.el-steps {
    margin: 20px 0;
}

.submit {
    position: fixed;
    bottom: 20px;
    right: 50px;
    z-index: 999;
}
</style>